<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>

<body>
    <h2 style="text-align:center;">商品详情</h2>
    <div id="box3" style="max-width: 600px; margin: 20px auto; border: 1px solid #ccc; padding: 20px;">
        <button onclick="fh()">返回</button>
    </div>

  <script>
        // 获取URL中的商品ID
        var i = location.search.substring(4);

        function fh() {
            location.href = "./考试.html";
        }

        var xhr = new XMLHttpRequest();

        // 将商品ID作为查询参数传递给后端
        xhr.open('get', 'https://liu.zzgoodqc.cn/goodsx/detail?id=' + encodeURIComponent(i));

        xhr.send()

        xhr.onload = () => {
            var d = JSON.parse(xhr.response);
            var box3 = document.getElementById('box3');

            // 清空容器并插入商品详情
            box3.innerHTML += `
                <div id='box2' style="border: 1px solid #ccc; padding: 15px; margin-top: 10px;">
                    <img src='${d.data.img}' width="100%">
                    <p>名称：${d.data.goods_name}</p>
                    <p>价格：￥${d.data.price}</p>
                    <p>库存：${d.data.stock}</p>
                    <p>销量：${d.data.sold}</p>
                    <p>状态：${d.data.status === "1" ? "上架" : "下架"}</p>
                </div>
            `;
        }

        xhr.onerror = (e) => {
            console.log(e);
        }
    </script>
</body>

</html>